<template>
    <view class="confirmOrder">
        <SRV-topbar title="商家在线充值" :isLeft="true"></SRV-topbar>
        <view class="goods_top">
        	<view class="left">
        		<image :src="info.cover" mode="aspectFill"></image>
        		<text>{{info.title}}</text>
        	</view>
        </view>
        <view class="main">
            <view class="line">
                <view>在线充值金额（元）</view>
                <view class="inputView">
                    <input type="number" v-model="formData.money" @blur="subRecharge()" placeholder="请输入充值金额" />
                </view>
            </view>
			<view class="line" v-if="formData.reward_val > 0">
			    <view>奖励囤陈一</view>
			    <view>{{formData.reward_val}}</view>
			</view>
			<view class="line" v-if="formData.reward_three_val > 0">
			    <view>奖励囤陈三</view>
			    <view>{{formData.reward_three_val}}</view>
			</view>
			<view class="line" v-if="formData.commission_val > 0">
			    <view>手续费</view>
			    <view>{{formData.commission_val}}</view>
			</view>
			<view class="line" v-if="formData.totalMoney > 0">
			    <view>合计支付</view>
			    <view style="color: red;font-size: 32rpx">{{formData.totalMoney}}</view>
			</view>
            <view class="remark" v-if="info.activity_id > 0">
            	<view style="line-height: 54rpx; padding: 20rpx;" v-html="info.activity_remark"></view>
            </view>
        </view>
		
        <view class="bottom">
            <view class="btn" @click="nowPayFun()">确定充值</view>
        </view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
				<view class="title">充值结果</view>
				<view class="paypir">
					<text>应付金额</text>
					<text>￥{{formData.totalMoney}}</text>
				</view>
				<view class="line2">
					<text>充值金额</text>
					<view>￥{{formData.money}}</view>
				</view>
				<view class="line2" v-if="formData.reward_val > 0">
					<text>奖励囤陈一</text>
					<view>{{formData.reward_val}}</view>
				</view>
				<view class="line2" v-if="formData.commission_val > 0">
					<text>手续费</text>
					<view>￥{{formData.commission_val}}</view>
				</view>
				<view class="pay_bot" @click="nowPayFun()">确认支付</view>
			</view>
		</uni-popup>
    </view>
</template>

<script>
    var _self;
    import serve from '../static/request.js';
    import storage from '../static/appkey.js';
    import common from '../static/jump.js';
    import commonPay from '../static/commonPay.js';
    export default {
        data() {
            return {
                info: {
                    merchant_id: 0,
                    cover: '',
                    title: '',
                    activity_id: 0,
                    activity_remark: '',
					rechargeRule: {
						recharge_basis_up_commission: 0,
						recharge_basis_down_commission: 0,
					},
                },
                rechargeId: 0,
                formData: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    merchant_id: '',
					rechargeId: 0,
                    money: 0,
					totalMoney: 0,
					basis_money: 0,
					reward_type: 0,
					reward_ratio: 0,
					reward_val: 0,
					reward_three_ratio: 0,
					reward_three_val: 0,
					commission_ratio: 0,
					up_commission: 0,
					down_commission: 0,
					commission_val: 0,
                },
                payData: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    pay_type: '',
                    pay_id: 0,
                    is_use_hdq: 0,
                    is_use_judge: 0,
                    payment_type: 1,
                    reward_type: 0, //奖励类型
                    jumpFile: '',
                },
            }
        },
        methods: {
			numFilter (value) {
				let tempVal = parseFloat(value).toFixed(3);
				let realVal = tempVal.substring(0, tempVal.length - 1);
				return realVal;
			},
            getInfo(){
                serve.request({
                	url: '/member/merchant/pay-online',
                	data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        rechargeId: _self.rechargeId,
                    },
                    v: '/v3'
                }).then(res => {
                	if(res.code != 200) {
                		uni.showToast({
                			title: res.message,
                			icon : 'none',
                			success:function(){ 
                				setTimeout(function () { 
                					uni.redirectTo({
                					    url: '/pages/index/index'
                					});
                				}, 2000) 
                			} 
                		});
                		return;
                	}
                	_self.info = res.data;
					_self.formData.money = _self.info.nowMoney;
					_self.formData.rechargeId = _self.info.rechargeId;
					_self.formData.reward_type = res.data.rechargeRule.reward_type;
					_self.formData.reward_ratio = res.data.rechargeRule.reward_ratio;
					_self.formData.reward_three_ratio = res.data.rechargeRule.reward_three_ratio;
					_self.formData.basis_money = res.data.rechargeRule.basis_money;
					_self.formData.up_commission = res.data.rechargeRule.up_commission;
					_self.formData.down_commission = res.data.rechargeRule.down_commission;
                    _self.formData.merchant_id = _self.info.merchant_id;
					_self.subRecharge();
                });
            },
            subRecharge() {
				if(Number(_self.formData.money) < 0) {
					uni.showToast({
						title: "充值金额格式错误",
						icon : 'none',
						success:function(){ 
							
						} 
					});
					return;
				}
				_self.formData.money = _self.numFilter(_self.formData.money);
				_self.formData.commission_ratio = Number(_self.formData.money) >= Number(_self.formData.basis_money) ? _self.formData.up_commission : _self.formData.down_commission; 
				_self.formData.commission_val =  _self.numFilter(Number(_self.formData.money) * Number(_self.formData.commission_ratio / 100));
				_self.formData.reward_val =  _self.numFilter(Number(_self.formData.money) * Number(_self.formData.reward_ratio / 100));
				_self.formData.reward_three_val =  _self.numFilter(Number(_self.formData.money) * Number(_self.formData.reward_three_ratio / 100));
				_self.formData.totalMoney = _self.numFilter(Number(_self.formData.money) + Number(_self.formData.commission_val));
				return ;
				if(_self.formData.commission_val <= 0 || _self.formData.reward_val <= 0) {
					_self.nowPayFun();
					return ;
				}
                _self.$refs.popup.open();
				return ;
            },
			nowPayFun() {
				serve.request({
					url: '/member/merchant/sub-online',
					data: _self.formData,
				    v: '/v3'
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title: res.message,
							icon : 'none'
						});
						return;
					}
				    _self.payData.pay_id = res.data.pay_id;
				    _self.payData.pay_type = res.data.pay_type;
				    commonPay.payFun(_self.payData, '/merchant/moneyLog?merchant_id='+_self.info.merchant_id);
				});
			},
        },
        onLoad(options) {
            _self = this;
            _self.rechargeId = options.rechargeId || "";
            if (options.q) {
                console.info(options.q);
                var link = decodeURIComponent(options.q);
                var paramArr = link.split('=');
                console.info(paramArr);
                _self.rechargeId = paramArr[1];
            }
            if (_self.rechargeId == "") {
                uni.showToast({
                    title: "错误的访问方式",
                    icon: 'none',
                    success() {
                        setTimeout(function() {
                            uni.redirectTo({
                                url: '/pages/index/index'
                            });
                        }, 2000)
                    }
                });
                return;
            }
            _self.getInfo();
        },
        onPullDownRefresh() {
            console.log('refresh');
            _self.getInfo();
        }
    }
</script>

<style scoped lang="scss">
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        .confirmOrder {
            padding-bottom: 124rpx !important;

            .bottom {
                padding-bottom: 12px !important;
            }
        }
    }
    .goods_top {
    	display: flex;
    	padding: 30rpx;
    	box-sizing: border-box;
    	justify-content: space-between;
    	align-items: center;
    		
    	.left {
    		font-size: 28rpx;
    		display: flex;
    		align-items: center;
    		color: #333333;
    		
    		image {
    			width:40rpx;
    			height:35rpx;
    			margin-right: 13rpx;
    		}
    		
    		text {
    			position: relative;
    			padding-right: 30rpx;
    		}
    		
    	}
    		
    	.right {
    		font-size: 32rpx;
    		display: flex;
    		align-items: center;
    		
    		image {
    			width: 27rpx;
    			height: 33rpx;
    			margin-right: 20rpx;
    		}
    		
    	}
    }
    .confirmOrder {
        padding-bottom: 100rpx;

        .bottom {
            position: fixed;
            z-index: 100;
            width: 100%;
            bottom: 0rpx;
            border-top: 1rpx rgba(235, 236, 240, 1) solid;
            align-items: center;
            display: flex;
            z-index: 10;
            box-sizing: border-box;
            padding-bottom: env(safe-area-inset-bottom);
            height: 100rpx;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 0px 0rpx rgba(235, 236, 240, 1);
            padding-left: 30rpx;
            font-size: 24rpx;
            color: rgba(60, 72, 104, 0.5);

            .btn {
                position: absolute;
                height: 100%;
                width: 100%;
                background: #EB5938;
                line-height: 100rpx;
                text-align: center;
                font-size: 28rpx;
                font-weight: bold;
                color: rgba(255, 255, 255, 1);
                right: 0rpx;
				letter-spacing: 10rpx;
            }
        }

        .main {
            border-bottom: 16rpx rgba(102, 102, 102, 0.05) solid;
            width: 100%;

            .line {
                position: relative;
                box-sizing: border-box;
                padding: 20rpx 30rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 28rpx;
                border-bottom: 1rpx rgba(235, 236, 240, 1) solid;
                border-top: 1rpx rgba(235, 236, 240, 1) solid;

                text {
                    color: #EB5938;
                    font-size: 32rpx;
                }
                input {
                    border: 1rpx solid #333333;
                    border-radius: 20rpx;
                    padding: 10rpx;
                }

            }
            .inputView {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                font-size: 28rpx;
            }
        }
		.pay_type{
			position: relative;
			z-index: 200;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;
			.close{
				position: absolute;
				width:23upx;
				height:23upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 36upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 28upx;
				text:last-child{
					color: #FF5F60;
					font-size: 40upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				.txt{
					color: #999999;
				}
				
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
				.sel {
					background-image: url(../static/img/check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				.nocheck {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 20%;
				}
				.check {
					background: url(../static/img/checkbox_check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100upx;
			  background: #FFBF0A;
			  color: #fff;
			  font-size: 32upx;
			  line-height: 100upx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
    }
</style>
